<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="node_modules/obs-websocket-js/dist/obs-websocket.js"></script>
  </head>
  <body>
    <h1>Connect</h1>
    <input id="address" placeholder="Address"><button id="address_button">Connect</button>

    <h1>Scene List</h1>
    <div id="scene_list"></div>

    <script>
      const obs = new OBSWebSocket();

      document.getElementById('address_button').addEventListener('click', e => {
        const address = document.getElementById('address').value;

        obs.connect({
          address: address
        });
      });

      obs.on('ConnectionOpened', () => {
        obs.send('GetSceneList').then(data => {
          const sceneListDiv = document.getElementById('scene_list');

          data.scenes.forEach(scene => {
            const sceneElement = document.createElement('button');
            sceneElement.textContent = scene.name;
            sceneElement.onclick = function() {
              obs.send('SetCurrentScene', {
                'scene-name': scene.name
              });
            };

            sceneListDiv.appendChild(sceneElement);
          });
        })
      });
    </script>
  </body>
</html>
